<style lang="scss" scoped>
    .mshop-swiper-left {
        overflow: hidden;
        // width: 100%;

        .box {
            display: flex;
            flex-wrap: nowrap;

            > div {
                display: inline-block;
            }

            .left {
                width: 100%;
            }
        }
    }
</style>

<template>
    <div class="mshop-swiper-left">
        <div class="box">
            <div class="left">
                <slot></slot>
            </div>

            <div class="right">
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

<script>
    import SwiperLeftFactory from 'lib/swiper-left'

    export default {
        data () { return {swiper: false}},
        events: {
            'toggle-display': function (display=false) {
                this.swiper.toggle(display);
            }
        },
        ready () {
            this.swiper = new SwiperLeftFactory(this.$el);
        }
    }
</script>
